import { Component } from "react";
// 类组件
class Counter extends Component {
  // 编写组件的逻辑代码
  // 1.定义状态变量
  state = {
    count: 0,
  };
  // 2.定义事件回调修改状态数据
  setCount = () => {
    // 修改状态数据
    this.setState({
      // this.setState: 修改状态数据
      count: this.state.count + 1,
    });
  };
  // 3.渲染UI结构(jsx)
  render() {
    return (
      <>
        {/* 注意：在类组件中访问组件中的状态的方法需要通过this访问 */}
        <div>count：{this.state.count}</div>
        <button onClick={this.setCount}>点我count加一</button>
      </>
    );
  }
}
// 函数式组件
function App() {
  return (
    <>
      <Counter />
    </>
  );
}

export default App;
